<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <MenuButton btnType="radio" :radioActive.sync="mealType" />

    <!-- 选择年月日 -->
    <div class="select-date">
      <!-- 年 -->
      <template v-if="mealType == '年统计'">
        <span class="date-title">年份：</span>
        <el-date-picker
          clear-icon="el-icon-circle-close"
          :clearable="false"
          :editable="false"
          v-model="timeData.year"
          value-format="yyyy-MM-dd"
          type="year"
          placeholder="选择年"
          @change="changeDate(0)"
        >
        </el-date-picker>
      </template>

      <template v-if="mealType == '季度统计'">
        <span class="date-title">年份：</span>
        <el-date-picker
          clear-icon="el-icon-circle-close"
          :clearable="false"
          :editable="false"
          v-model="timeData.year"
          value-format="yyyy-MM-dd"
          type="year"
          placeholder="选择年"
          @change="changeDate(1)"
        >
        </el-date-picker>
        <span class="date-title">季度：</span>
        <el-select v-model="quarter" placeholder="请选择">
          <el-option
            v-for="item in quarterList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>

      <!-- 月 -->
      <template v-if="mealType == '月统计'">
        <span class="date-title">月份：</span>
        <el-date-picker
          :clearable="false"
          :editable="false"
          v-model="timeData.month"
          value-format="yyyy-MM-dd"
          type="month"
          placeholder="选择月"
          @change="changeDate(2)"
        >
        </el-date-picker>
      </template>

      <!-- 日 -->
      <template v-if="mealType == '日统计'">
        <span class="date-title">号数：</span>
        <el-date-picker
          :editable="false"
          :clearable="false"
          v-model="timeData.date"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          @change="changeDate(3)"
        >
        </el-date-picker>
      </template>
    </div>
    <!-- echarts图表 -->
    <Echarts />
  </div>
</template>

<script>
import Echarts from "./components/echarts";
import { getFlowStatistics } from "@/api";
import MenuButton from "@/components/MenuButton";
export default {
  name: "Flow",
  components: {
    MenuButton,
    Echarts
  },

  data() {
    return {
      // 时间数据
      timeData: {
        year: "",
        month: "",
        date: ""
      },
      // 季度
      quarter: 0,
      // 季度列表
      quarterList: [
        {
          value: 0,
          label: "第一季度"
        },
        {
          value: 1,
          label: "第二季度"
        },
        {
          value: 2,
          label: "第三季度"
        },
        {
          value: 3,
          label: "第四季度"
        }
      ],
      //当前表格类型--------------------------------------------
      mealType: "",
      // 搜索条件
      searchForm: {
        endDate: "",
        startDate: "",
        index: "",
        shopUuid: this.$store.getters.shopUuid
      }
    };
  },

  watch: {
    mealType(newVal) {
      let type = "";
      switch (newVal) {
        case "年统计":
          type = 0;
          break;
        case "季度统计":
          type = 1;
          break;
        case "月统计":
          type = 2;
          break;
        case "日统计":
          type = 3;
          break;
      }
      this.changeDate(type);
    },
    quarter() {
      this.changeDate(1);
    }
  },

  created() {
    this.initDate();
  },

  methods: {
    initDate() {
      let dateData = new Date();
      const yearStr = dateData.getFullYear().toString();
      const monthStr =
        yearStr +
        "-" +
        (dateData.getMonth() >= 10
          ? dateData.getMonth() + 1
          : "0" + (dateData.getMonth() + 1));
      const dateStr = monthStr + "-" + dateData.getDate();
      this.timeData = {
        year: yearStr + "-01-01",
        month: monthStr + "-01",
        date: dateStr
      };
    },

    // 日期改变
    changeDate(type) {
      switch (type) {
        case 0:
          this.searchForm.startDate = this.timeData.year;
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
        case 1:
          let arr = this.timeData.year.split("-");
          arr[1] =
            parseInt(arr[1]) + this.quarter * 3 >= 10
              ? parseInt(arr[1]) + this.quarter * 3
              : "0" + (parseInt(arr[1]) + this.quarter * 3);
          this.searchForm.startDate = arr.join("-");
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
        case 2:
          this.searchForm.startDate = this.timeData.year;
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
        case 3:
          this.searchForm.startDate = this.timeData.year;
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
      }

      this.getFlowStatistics();
    },

    //获取信息--------------------------------------------
    async getFlowStatistics() {
      const parent = {
        ...this.searchForm
      };
      let res = await getFlowStatistics(parent).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items.list;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/element-ui.scss";
::v-deep.app-container {
  .select-date {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    margin-top: 16px;
    .el-date-editor,
    .el-input {
      width: 318px;
      margin-right: 40px;
      & > input {
        cursor: pointer;
      }
    }

    .date-title {
      white-space: nowrap;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #646464;
      margin-right: 17px;
    }
  }

  .purchase {
    margin: 0 auto;
    width: 84px;
    height: 36px;
    background: #ecfff1;
    border: 1px solid #44d26c;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & > i {
      font-size: 16px;
      color: #44d26c;
      margin-right: 10px;
    }

    & > span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #44d26c;
      line-height: 60px;
    }

    &:hover {
      background-color: #44d26c;
      & > i,
      span {
        color: #ecfff1;
      }
    }
  }

  .delete {
    color: $--color-danger;
    cursor: pointer;
  }
}
</style>
